.basic-modal.modal {
  .modal-content {
    padding: 24px 24px;
    background-color: white;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    color: rgba(0, 0, 0, 0.8);
    max-width: 100%;
    position: relative;
  }
  .modal-header {
    position: relative;
    line-height: 24px;
    margin-bottom: 24px;
    .modal-title {
      font-size: 20px;
      vertical-align: top;
    }
    .modal-close-button {
      outline: none;
      height: 14px;
      width: 14px;
      font-size: 14px;
      opacity: 0.7;
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
      .svg-icon {
        vertical-align: top;
      }
    }
  }
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
  }
}

.modal-sm.modal {
  .modal-content {
    width: 320px;
  }
}

.modal-md.modal {
  .modal-content {
    width: 480px;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.modal-full .modal-content {
  height: 100%;
  max-height: 100vh;
  width: 100%;
  max-width: 100vw;
}
